<template>
	<view class="detail">
		<view class="course-thumb"><image :src="Pic.course.thumb"></image></view>
		<!-- tab栏开始 -->
		<view class="navs">
			<view :class="['item', navTab === 'desc' ? 'active' : '']" @tap="NavTab($event)" data-tab="desc">
				课程介绍
			</view>
			<view :class="['item', navTab === 'menu' ? 'active' : '']" @tap="NavTab($event)" data-tab="menu">
				课程目录
			</view>
			<view :class="['item', navTab === 'comment' ? 'active' : '']" @tap="NavTab($event)" data-tab="comment">
				讨论区
			</view>
		</view>
		<!-- tab栏结束 -->

		<!-- 课程介绍开始 -->
		<view class="desc" :hidden="navTab !== 'desc'"><rich-text :nodes="Pic.course.render_desc"></rich-text></view>
		<!-- 课程介绍结束 -->

		<!-- 课程目录开始 -->
		<view class="menus" :hidden="navTab !== 'menu'">
			<view class="chapter-item" v-for="(chapter, index) in Pic.chapters" :key="item.id">
				<view class="chapter-name">{{ chapter.title }}</view>
				<view class="video-item" v-for="(item, index) in Pic.videos[chapter.id]" :key="item.id">
					<text class="free" v-if="item.charge === 0">试看</text>
					{{ item.title }}
				</view>
			</view>
		</view>
		<!-- 课程目录结束 -->

		<!-- 下面tab栏 购买课程开始 -->
		<view class="bottom-bar" :hidden="navTab === 'comment'">
			<view :class="['colletion', isCollect ? 'active' : '']" @click="collectAction">
				<text class="iconfont iconlike"></text>
			</view>
			<view class="buttons">
				<block v-if="Pic.course.charge === 0">
					<text class="start-learn-button">开始学习</text>
				</block>
				<block v-else>
					<block >
						<text class="buy-button" >购买课程 ￥{{Pic.course.charge}}</text>
						<text class="buy-role-button">开通会员免费看</text>
					</block>
				</block>
			</view>
		</view>
		<!-- 下面tab栏 购买课程结束 -->
	</view>
</template>

<script>
import { request } from '@/request/request.js';
export default {
	async onLoad(option) {
		console.log(option);
		let res = await request({
			url: `/course/${option.id}`
		});
		this.Pic = res.data.data;
		console.log(res.data.data);
		
		let res1 = await uni.request({
			url: `/course/${option.id}/comment`
		});
		this.comments = res1
		console.log(this.comments);
	},
	data() {
		return {
			Pic: [],
			navTab: 'desc', //tab栏切换
			chapters: [], //课程目录
			comments:[],
			commentContent:'',
			// isBuy: false,
			isCollect: false,
			// courseId: 0,
		};
	},
	methods: {
		NavTab(e) {
			let tab = e.currentTarget.dataset.tab;
			console.log(tab);
			if (this.navTab === tab) {
				return;
			}
			this.navTab = tab;
		},
		async collectAction() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/auth/auth',
				})
				return
			}
		
			course.like(this.courseId).then(res => {
				let status = res;
				this.isCollect = status === 0 ? false : true;
			});
			// let res = await request({
			// 	url: `/course/${courseId}/like`,
			// });
			// this.isCollect = res === 0 ? false : true
		},
	}
};
</script>

<style scoped>
@import '@/static/assets/fonts/iconfont.css';
.course-thumb {
	width: 100%;
	height: 450rpx;
	float: left;
}
.course-thumb image {
	width: 100%;
	height: 450rpx;
}
.navs {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	background-color: white;
	padding: 20px 15px;
	box-shadow: 0px 2px 4px 0px rgba(204, 204, 204, 0.2);
	display: flex;
}

.navs > .item {
	flex: 1;
	text-align: center;
	font-size: 15px;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	line-height: 1;
}

.navs .item.active {
	font-weight: 600;
	color: rgba(23, 132, 237, 1);
}

.desc,
.menus,
.comments {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	background-color: white;
	padding: 30px 15px 0 15px;
	margin-top: 10px;
}

.desc {
	padding-bottom: 30px;
}
.menus .chapter-item {
	width: 100%;
	height: auto;
	float: left;
}

.menus > .chapter-item > .chapter-name {
	width: 100%;
	height: auto;
	float: left;
	font-size: 14px;
	font-weight: 800;
	color: rgba(51, 51, 51, 1);
	line-height: 1;
	margin-bottom: 60rpx;
}
.menus > .chapter-item > .video-item > .free {
	color: white;
	background-color: #1784ed;
	padding: 4rpx 9rpx;
	margin-right: 15rpx;
	border-radius: 12rpx;
	font-size: 30rpx;
}
.menus > .chapter-item > .video-item {
	margin-bottom: 60rpx;
}

.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 50px;
		z-index: 99;
		display: flex;
		box-sizing: border-box;
		padding: 5px 15px 4px 15px;
		background-color: white;
		border-top: 1px solid #f2f2f2;
	}

	.bottom-bar>.colletion {
		margin-right: 15px;
		font-size: 16px;
		line-height: 40px;
		color: rgba(0, 0, 0, .4);
	}

	.bottom-bar>.colletion.active {
		color: rgba(23, 132, 237, 1);
	}

	.bottom-bar>.buttons {
		flex: 1;
		display: flex;
	}

	.bottom-bar>.buttons>.ios-alert {
		width: 100%;
		height: auto;
		float: left;
		font-size: 12px;
		color: #aaa;
		line-height: 40px;
		text-align: center;
	}

	.bottom-bar>.buttons>.start-learn-button {
		flex: 1;
		height: 40px;
		background: linear-gradient(180deg, rgba(51, 186, 247, 1) 0%, rgba(23, 132, 237, 1) 100%);
		color: white;
		border-radius: 4px;
		font-size: 15px;
		font-weight: 500;
		line-height: 40px;
		text-align: center;
	}

	.bottom-bar>.buttons>.buy-button {
		flex: 1;
		height: 40px;
		background: linear-gradient(180deg, rgba(51, 186, 247, 1) 0%, rgba(23, 132, 237, 1) 100%);
		color: white;
		border-radius: 4px 0px 0px 4px;
		font-size: 15px;
		font-weight: 500;
		line-height: 40px;
		text-align: center;
	}

	.bottom-bar>.buttons>.buy-role-button {
		flex: 1;
		height: 40px;
		font-size: 15px;
		font-weight: 500;
		line-height: 40px;
		background: linear-gradient(180deg, rgba(255, 246, 207, 1) 0%, rgba(255, 222, 108, 1) 100%);
		border-radius: 0 4px 4px 0px;
		color: rgba(206, 162, 0, 1);
		text-align: center;
	}
</style>
